import React, { useRef, useEffect } from 'react';
import * as echarts from 'echarts';

const EChartsPie = ({ data = [], chartTitle = '数据分布饼图' }) => {
  const chartRef = useRef(null);
  const chartInstanceRef = useRef(null);

  // 初始化图表的 useEffect
  useEffect(() => {
    // 1. 将 initChart 定义在 useEffect 内部
    const initChart = () => {
      if (chartRef.current && !chartInstanceRef.current) {
        chartInstanceRef.current = echarts.init(chartRef.current);
        const option = {
          title: { text: chartTitle, left: 'center' },
          tooltip: { trigger: 'item' },
          legend: { orient: 'horizontal', left: 'center',top:'bottom' },
          series: [{ 
            type: 'pie', 
            data: data 
          }]
        };
        chartInstanceRef.current.setOption(option);
      }
    };

    // 2. 直接调用内部定义的函数
    initChart();
    
    // 清理函数
    return () => {
      if (chartInstanceRef.current) {
        chartInstanceRef.current.dispose();
        chartInstanceRef.current = null;
      }
    };
  }, [chartTitle, data]); // 3. 只依赖外部变量（chartTitle 和 data）

  // 数据更新时的逻辑
  useEffect(() => {
    if (chartInstanceRef.current && data.length > 0) {
      chartInstanceRef.current.setOption({
        series: [{ data: data }]
      });
    }
  }, [data]);

  return (
    <div
      ref={chartRef}
      style={{ width: '400px', height: '400px', minWidth: '300px' }}
    />
  );
};

export default EChartsPie;
